<!-- 通用搜索过滤组件 -->
 <!-- components/ui/SearchFilter.vue -->
<template>
  <div class="relative">
    <input
      v-model="searchQuery"
      type="text"
      :placeholder="placeholder || '搜索景点...'"
      class="w-full px-4 py-2 pl-10 border rounded-lg focus:ring-2 focus:ring-blue-500"
      @keyup.enter="handleSearch"
    />
    <font-awesome-icon
      icon="search"
      class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 cursor-pointer"
      @click="handleSearch"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

defineProps<{
  placeholder?: string
}>()

const emit = defineEmits<{
  (e: 'search', query: string): void
}>()

const searchQuery = ref('')

const handleSearch = () => {
  emit('search', searchQuery.value)
}
</script>

<style scoped>
.search-filter input::placeholder {
  @apply text-gray-400;
  @apply transition-colors;
}

.search-filter input:focus::placeholder {
  @apply text-transparent;
}
</style>